<template>
    <div class="blue">
  <div class="top">
    <ul>
        <li>
            <van-icon name="after-sale" size="36"/>
            <p>我的存款</p>
        </li>
        <li>
            <van-icon name="balance-list-o" size="36"/>
            <p>结构性存款</p>
        </li>
        <li>
            <van-icon name="bulb-o" size="36"/>
            <p>智存通</p>
        </li>
        <li>
            <van-icon name="ecard-pay" size="36"/>
            <p>E红包</p>
        </li>
    </ul>
    <ul>
        <li>
            <van-icon name="chart-trending-o" size="36"/>
            <p>步步盈</p>
        </li>
        <li>
            <van-icon name="refund-o" size="36"/>
            <p>惠利通</p>
        </li>
        <li>
            <van-icon name="newspaper-o" size="36"/>
            <p>特色存单</p>
        </li>
        <li>
            <van-icon name="friends-o" size="36"/>
            <p>拼团存款</p>
        </li>
    </ul>
  </div>
</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .blue {
        width: 100%;
        overflow: auto;
        color: #fff;
        
    }
    .top {
        width: 200%;
        height: 1.2rem;
        background: #3269b1;
       
        display: flex;
        ul {
            width: 100%;
            height: 1rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            li {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                p {
                    font-size: .12rem;
                   margin-top: .05rem;
                   
                   
                }
            }
        }
    }

</style>